<template>
	<view class="bg-gray">
		<view class="width">
			<view class="bg-white commonbg flex-row-between topinfo">
				<view class="flex-row-start font15">
					<image src="https://www.haopengsong.xyz/static/weixiu/home.png" mode="widthFix" class="home"></image>
					岭尚小区
				</view>
				<view class="qiehuan">切 换</view>
			</view>
			<view class="boxin bg-white font15">
				<view class="flex-row-between boxitem">
					选择分类
					<view class="flex-row-between">
						<view 
							:class="tabIndex == index ? 'tab tabcur' : 'tab'"
							v-for='(item,index) in tabList'
							:key='index'
							@click="tabIndex = index"
						>
							{{ item.name }}
						</view>
					</view>
				</view>
				<view class="flex-row-between boxitem">
					期望上门时间
					<view class="flex-row-between" @click="showPicker = true">
						{{ chooseTime }}<u-icon name='arrow-right'></u-icon>
					</view>
				</view>
				<view class="boxitem">
					问题描述
					<view class="liuyan">
						<u-input
						    type='textarea'
							placeholder="请输入留言"
							class="mobile"
							v-model="liuyan"
						/>
					</view>
				</view>
				<view class="boxitem">
					相关图片<text class="color6 font12">(最多6张图片)</text>
					<u-upload :header=" { }" 
						:action="actionUplod" 
						width="160" 
						@on-uploaded="onUploaded" 
						:max-count="6" :show-progress="false">
					</u-upload>
				</view>
			</view>
			<view class='apply'>
				<u-button type="primary" shape='circle'>提交</u-button>
			</view>
			<bottomsubmit title='确认支付'></bottomsubmit>
		</view>
		<u-picker
			 v-model="showPicker"
			 mode="time" 
			 :confirm-color="lightColor" 
			 :params='params'
			 @confirm="timeConfirm">
		</u-picker>
	</view>
</template>

<script>
import storage from "@/utils/storage.js"; //缓存
import bottomsubmit from "@/components/huashuiwan/bottomsubmit.vue"; //导航栏模块
export default {
	data() { 
		return {
			actionUplod:'',
			chooseTime:'请选择',
			params:{
				year: true,
				month: true,
				day: true,
				hour: true,
				minute: true,
				second: false,
				// 选择时间的时间戳
				timestamp: true,
			},
			//时间弹窗
			showPicker:false,
			bgimg:'https://www.haopengsong.xyz/static/movie/songdetail.png',
			carouselImage:[
				{ name:'https://www.haopengsong.xyz/static/movie/songbg.png'}
			],
			liuyan:'',
			tabIndex:0,
			lightColor:'#499C43',
			tabList:[
				{ name:'报修', id:1 },
				{ name:'基础保洁', id:2 },
				{ name:'深度保洁', id:3 },
			]
		};
	},
	components: {
		bottomsubmit
	},
	/**
	 * 页面加载
	 */
	onLoad(options) {
		
	},
	/**
	 * 页面显示
	 */
	onShow() {
		
	},
	/**
	 * 触底事件
	 */
	onReachBottom() {
		
	},
	/**
	 * 下拉刷新
	 */
	onPullDownRefresh() {
		
	},
	/**
	 * 页面滚动
	 * @param {Object} e
	 */
	onPageScroll(e) {
		
	},
	mounted() {
		
	},
	methods: {
		jump(res){
			uni.navigateTo({
				url: res
			});
		},
		/**
		 * 时间选择
		 */
		timeConfirm(res){
			this.chooseTime = res.year+'年'+res.month+'月'+res.day+' '+res.hour+':'+res.minute
		}
	}
};
</script>

<style scoped lang="scss">
	.upload{
		width: 100px;
		height: 100px;
		border: 1px solid #CCCCCC;
		font-size: 30px;
		text-align: center;
		line-height: 100px;
		color: #CCCCCC;
	}
	.topinfo{
		margin-bottom: 10px;
	}
	.home{
		width: 35px;
		height: 35px;
		margin-right: 10px;
	}
	.qiehuan{
		width: 78px;
		height: 28px;
		text-align: center;
		line-height: 28px;
		border-radius: 28px;
		background-color: #499C43;
		color: #fff;
	}
	.apply{
		margin: 30px 0;
	}
	.bg-gray{
		padding-bottom: 40px;
	}
	.tab{
		padding: 7px 12px;
		border-radius: 17px;
	}
	.tabcur{
		background-color: #E5F6E6;
		color: #499C43;
	}
</style>